<template>
  <div class="main-wrap">
    <div class="spin-mask" v-if="loading">
      <a-spin />
    </div>
    <a-form style="max-width: 600px; margin: 40px auto 0;" v-if="loaded">
      <a-form-item label="收款账户" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <!-- :value="payeeActItem" -->
        <a-select placeholder="选择收款账户" v-if="incomeActList.length > 0" @change="onPayeeActChange">
          <a-select-option
            :value="item.payeeAct + '=' + item.withdrawType + '=' + item.payeeName"
            v-for="item in incomeActList"
            :key="item.id"
          >{{ getIncomeActLabel(item) }}</a-select-option>
        </a-select>
        <a @click="gotoAddAct" class="plus-account-btn" v-else>
          <a-icon type="plus" />暂无收款账户，立即添加
        </a>
      </a-form-item>
      <a-form-item label="结算方式" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-tag
          :color="item.key == 1 ? '#2db7f5' : item.key == 2 ? '#87d068' : item.key == 3 ? '#108ee9' : '#f50'"
          v-for="item in withDrawType"
          :key="item.key"
        >{{ item.name }}</a-tag>
      </a-form-item>
      <a-form-item label="账户余额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <span class="total-money">{{ '￥' + totalMoney }}</span>
      </a-form-item>
      <a-form-item label="冻结金额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <span class="disable-money">{{ '￥' + freezeMoney }}</span>
      </a-form-item>
      <a-form-item label="可提现余额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <span class="enable-money">{{ '￥' + enabledMoney }}</span>
      </a-form-item>
      <a-form-item label="提现金额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-input
          prefix="￥"
          v-model="applyMoney"
          :disabled="incomeActList.length == 0 || enabledMoney < 3000"
          placeholder="请输入提现金额"
        />
        <span class="tip-msg">
          （最小提现金额为
          <em>￥3000.00</em>，必须是
          <em>1元</em>的倍数）
        </span>
      </a-form-item>
      <a-form-item label="手续费" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <span class="disable-money">{{ '￥' + (rateMoney || '0.00') }}</span>
        <span class="tip-msg">（提现金额的0.50%）</span>
      </a-form-item>
      <a-form-item label="实际到账金额" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <span class="disable-money">{{ '￥' + (realMoney || '0.00') }}</span>
        <span class="tip-msg">（已扣除手续费）</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 19, offset: 5 }">
        <a-button
          type="primary"
          @click="nextStep"
          :disabled="incomeActList.length == 0 || enabledMoney < 3000"
        >下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import DictData from '@/config/dict.conf'
import { getWalletInfo } from '@/api/api'

const { withDrawType } = DictData

export default {
  name: 'Step1',
  data() {
    return {
      withDrawType,
      loading: false,
      loaded: false,

      //收款账户信息
      payeeActItem: null,
      formData: {
        payeeAct: '',
        withdrawType: '',
        withdrawMoney: '',

        //目前写死
        bankId: '001',
        bankName: '支付宝'
      },

      //提现收款账户
      incomeActList: [],
      totalMoney: '0.00',
      freezeMoney: '0.00',

      //申请金额
      applyMoney: ''
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    /**
     * 可提现金额
     */
    enabledMoney() {
      if (this.totalMoney == '0.00' || this.totalMoney == 0) return '0.00'
      let enabledMoney = Number(this.totalMoney) * 100 - Number(this.freezeMoney) * 100
      return (enabledMoney / 100).toFixed(2)
    },

    /**
     * 手续费问题
     */
    rateMoney() {
      let applyMoney = Number(this.applyMoney) || 0
      let rate = 0.005 //千分之一个点
      let rateMoney = applyMoney * rate
      rateMoney = Math.round(rateMoney * 100) / 100
      return rateMoney
    },

    /**
     * 实际到手金额
     */
    realMoney() {
      let applyMoney = Number(this.applyMoney) * 100
      let rateMoney = Number(this.rateMoney) * 100
      return (applyMoney - rateMoney) / 100
    }
  },
  methods: {
    /**
     * 获取余额信息
     */
    loadData() {
      this.loading = true
      getWalletInfo().then(res => {
        const { data } = res
        this.incomeActList = data.merchantActList || []
        this.totalMoney = data.totalMoney
        this.freezeMoney = data.freezeMoney
        this.loading = false
        this.loaded = true
      })
    },

    /**
     * 收款账户发送变动
     */
    onPayeeActChange(value) {
      let item = value.split('=')
      if (item.length > 1) {
        this.formData.payeeAct = item[0]
        this.formData.withdrawType = item[1]
        this.formData.payeeName = item[2]
      }
    },

    /**
     * 获取收款账户
     */
    getIncomeActLabel(item) {
      let prefix = ''
      switch (item.withdrawType) {
        case '1':
          prefix = '支付宝：'
          break
        case '2':
          prefix = '微信：'
        case '3':
          prefix = '银行卡：'
          break
        default:
          prefix = '其他：'
      }

      let act = item.payeeAct
      return `${prefix}${act}`
    },

    /**
     * 跳转账号添加绑定页面
     */
    gotoAddAct() {
      this.$router.push({ name: 'CashAccount' })
    },

    /**
     * 校验提现金额是否为整数元
     */
    checkApplyMoney() {
      let applyMoney = Number(this.applyMoney)

      if (applyMoney == 0) {
        this.$message.warning('提现金额不能为空')
        return false
      }

      if (applyMoney < 3000) {
        this.$message.warning('很抱歉！提现金额最低3000元起')
        return false
      }

      if (applyMoney > Number(this.enabledMoney)) {
        this.$message.warning('很抱歉！提现金额超出了可提现余额范围')
        return false
      }

      if (applyMoney % 1 > 0) {
        this.$message.warning('很抱歉！提现金额需为1元整数倍')
        return false
      }

      return true
    },

    /**
     * 提交
     */
    nextStep() {
      if (this.incomeActList.length == 0) {
        this.$message.warning('暂无收款账户，请先添加了收款账户!')
        return
      }

      if (!this.formData.payeeAct || !this.formData.withdrawType) {
        this.$message.warning('请先选择收款账户!')
        return
      }

      if (!this.checkApplyMoney()) {
        return
      }

      //申请提现金额
      let money = this.applyMoney
      this.formData.withdrawMoney = money

      //其他相关的余额
      let freezeMoney = this.freezeMoney
      let totalMoney = this.totalMoney
      let enabledMoney = this.enabledMoney
      let rateMoney = this.rateMoney
      let realMoney = this.realMoney

      //下一步
      this.$emit('nextStep', {
        ...this.formData,
        freezeMoney,
        totalMoney,
        enabledMoney,
        rateMoney: rateMoney.toFixed(2),
        realMoney: realMoney.toFixed(2)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main-wrap {
  position: relative;

  .spin-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    z-index: 100;
    background: rgba($color: #fff, $alpha: 0.4);
  }
}

.ant-tag {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

.disable-money {
  color: #f50;
}

.disable-money,
.enable-money,
.total-money {
  font-weight: 500;
  font-size: 14px;
}

.enable-money {
  color: #87d068;
}

.tip-msg em {
  font-style: normal;
  color: #f50;
}

.plus-account-btn {
  padding-left: 10px;
  i {
    margin-right: 8px;
  }
}
</style>
